<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #div1 input.active {
        background-color: blue;
    }
    
    #div2 {
        position: absolute;
    }
    
    #div2 div {
        width: 200px;
        height: 200px;
        background-color: #55c;
        position: absolute;
        display: none;
    }
    
    #div2 div.box {
        display: block;
    }
    </style>
    <script>
    window.onload = function(argument) {
        var odiv1 = document.getElementById('div1');
        var abtn = odiv1.getElementsByTagName('input');
        var odiv2 = document.getElementById('div2');
        var abox = odiv2.getElementsByTagName('div');
        for (var i = abtn.length - 1; i >= 0; i--) {
            abtn[i].num = i;
            abtn[i].onclick = function(argument) {
                for (var j = 0; j <abtn.length; j++) {
                    abtn[j].className = "";
                    abox[j].style.display="none";
 
                }
                this.className = "active";
                abox[this.num].style.display="block";
            }
        }
    }
    </script>
</head>

<body>
    <div id="div1">
        <input class="active" type="button" value="1">
        <input type="button" value="2">
        <input type="button" value="3">
    </div>
    <div id="div2">
        <div class="box">1box adlkajdhh</div>
        <div>2box shtsdfahafgag</div>
        <div>3box tybhijnftuhuf</div>
    </div>
</body>

</html>
